<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="./static/css/common.css">
		<link rel="stylesheet" href="./static/plugins/layui/css/layui.css">
		<link rel="stylesheet" href="./static/css/login.css">
	</head>
	<body id="login-page">
	    <div class="layui-container">
			<div class="layui-row layui-row-space10">
				<div class="layui-col-xs2 layui-col-md4">
					.
				</div>
				<div class="layui-col-xs8 layui-col-md4">
					<div class="layui-form" id="login-form">
						<form class="layui-form" action="">
							<div class="layui-form-item logo-title">
								<h1>用户登录</h1>
							</div>
							<div class="layui-form-item">
								<label class="layui-icon layui-icon-username" for="UserName"></label>
								<input type="text" name="username" id="username" lay-verify="required|account" placeholder="用户" autocomplete="off" class="layui-input" value="">
							</div>
							<div class="layui-form-item">
								<label class="layui-icon layui-icon-password" for="Password"></label>
								<input type="password" name="password" id="password" lay-verify="required|password" placeholder="密码" autocomplete="off" class="layui-input" value="">
							</div>
						
							<div class="layui-form-item">
								<input type="checkbox" name="remember" value="true" lay-skin="primary" title="记住密码">
							</div>
							<div class="layui-form-item">
								<button class="layui-btn layui-btn-fluid layui-bg-red" lay-submit lay-filter="form-login">登录</button>
							</div>
							<p style="width: 85%"><a href="register.html" class="fl">没有账号？立即注册</a>&nbsp;&nbsp;<a href="javascript:;" class="fr">忘记密码？</a></p>
						</form>
					</div>
				</div>
				<div class="layui-col-xs2 layui-col-md4">
					.
				</div>
			</div>
	    </div>
		<script src="static/plugins/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="static/js/common.js" type="text/javascript" charset="utf-8"></script>
		<script>
		        layui.use(['jquery', 'form', 'layer', ], function () {
					var $ = layui.jquery,
							form = layui.form,
							layer = layui.layer;


					//记住密码状态切换
		            if (localStorage.getItem('remember')) {
						var setval = JSON.parse(localStorage.getItem('remember'));
						$("input[name='username']").val(setval.username)
		                $("input[name='password']").val(setval.password)
		            }

		            //向后台提交数据
					form.on("submit(form-login)", function (data) {
						var index = top.layer.msg('正在登录，请稍候', {icon: 16, time: false, shade: 0.8});
						setTimeout(function () {
							$.ajax({
								url: 'http://localhost:8080/tourism-user-api/welcome/login',
								type: 'POST',
								dataType: 'json',
								/* contentType: 'application/json', */
								xhrFields: {
									withCredentials: true
								},
								data:data.field,
								success: function (resData) {
									if (resData.code == 1000) {

										//把SessionID存到Cookie中
										cookie.set("usertoken", resData.sessionId);
										cookie.set("username", resData.username);
										//存储账号密码的变量
										var reobj = {
										    username: data.field.username,
										    password: data.field.password
										}
										//如果记住密码，就把现在的用户和密码保存到浏览器
										if (data.field.remember) {
										    localStorage.setItem("remember", JSON.stringify(reobj));
										} else {
										    localStorage.removeItem("remember");
										}

										setTimeout(function () {
											window.location.href = "index.html";
										},800 );
										layer.msg(resData.msg, {
											icon: 1,
											time: 1000
										});
									}else if(resData.code == 1002){
										top.layer.close(index);
										layer.msg(resData.msg, {
											icon: 2,
											time: 1000
										})
										return false;
									}else{
										top.layer.close(index);
										layer.msg(resData.msg, {
											icon: 0,
											time: 1000
										})
										return false;
									}
									return false;
								},

								error: function (XMLHttpRequest, textStatus, errorThrown) {
									layer.alert('系统错误');
								}

							});
						}, 1000);
						return false;

					});
					$.ajax({
						url: 'http://localhost:8080/tourism-user-api/user/info',
						type: 'POST',
						dataType: 'json',
						/* contentType: 'application/json', */
						xhrFields: {
							withCredentials: true
						},
						success: function (resData) {
							if (resData.data!=null) {
									window.location.href = "index.html";
							}else
							return false;
						},
					});
		        });
		    </script>
		</body>
		
		</html>
